<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- attribute 将自动添加到根节点的 attribute 中 -->
      <date-picker1 name="partydate" roomid="18"></date-picker1>
      <hr />

      <!-- 同样的规则也适用于自定义事件（自定义事件默认被组件根元素接收） -->
      <date-picker2 @change="submitChange"></date-picker2>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          submitChange() {
            console.log("submitChange");
          },
        },
      });

      /* 接收定义在组件上的attribute */
      app.component("date-picker1", {

        /* A.attribute默认被根元素继承 */
        // template: `
        //   <div class="date-picker">
        //     <input type="datetime-local" />
        //   </div>
        // `,

        /* B.具体元素去接收定义在组件层上的attribute */
        // inheritAttrs: false,
        // template: `
        //   <div class="date-picker">
        //     <!--接收全部attribute-->
        //     <input type="datetime-local" v-bind="$attrs" />
        //     <!--接收指定attribute-->
        //     <input type="datetime-local" v-bind:name="$attrs.name" />
        //   </div>
        //   `

        key:"value"
      });

      /* 接收定义在组件上的自定义事件 */
      app.component("date-picker2", {

        /* A.由根元素接收定义组件上的自定义事件（默认行为） */
        // template: `
        //   <select>
        //     <option value="1">Yesterday</option>
        //     <option value="2">Today</option>
        //     <option value="3">Tomorrow</option>
        //   </select>
        //       `,

        /* B.由指定元素接收定义在组件上的自定义事件 */
        // template: `
        //   <select>
        //     <option value="1">Yesterday</option>
        //     <option value="2">Today</option>
        //     <option value="3">Tomorrow</option>
        //   </select>
        //   <input @change="$attrs.onChange"/>
        //       `,

        created() {
          console.log("date-picker2 attrs", this.$attrs);
          console.log("date-picker2 props", this.$props);
        },

      });

      const vm = app.mount("#app");
    </script>
  </body>
</html>
